<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <link rel="shortcut icon" href="img/favicon_1.ico">

        <title>Velonic - Responsive Admin Dashboard Template</title>

        <!-- Google-Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:100,300,400,600,700,900,400italic' rel='stylesheet'>


        <!-- Bootstrap core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="css/bootstrap-reset.css" rel="stylesheet">

        <!--Animation css-->
        <link href="css/animate.css" rel="stylesheet">

        <!--Icon-fonts css-->
        <link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
        <link href="assets/ionicon/css/ionicons.min.css" rel="stylesheet" />

        <!-- Plugins css -->
        <link href="assets/owl-carousel/owl.carousel.css" rel="stylesheet" />


        <!-- Custom styles for this template -->
        <link href="css/style.css" rel="stylesheet">
        <link href="css/helper.css" rel="stylesheet">
        <link href="css/style-responsive.css" rel="stylesheet" />

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
        <!--[if lt IE 9]>
          <script src="js/html5shiv.js"></script>
          <script src="js/respond.min.js"></script>
        <![endif]-->

    </head>


    <body>

        <!-- Aside Start-->
        <aside class="left-panel">

            <!-- brand -->
            <div class="logo">
                <a href="index.html" class="logo-expanded">
                    <img src="img/single-logo.png" alt="logo">
                    <span class="nav-label">Velonic</span>
                </a>
            </div>
            <!-- / brand -->
        
            <!-- Navbar Start -->
            <nav class="navigation">
                <ul class="list-unstyled">
                    <li class="has-submenu"><a href="#"><i class="ion-home"></i> <span class="nav-label">Dashboard</span></a>
                        <ul class="list-unstyled">
                            <li><a href="index.html">Dashboard v1</a></li>
                            <li><a href="dashboard2.html">Dashboard v2</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-flask"></i> <span class="nav-label">UI Elements</span></a>
                        <ul class="list-unstyled">
                            <li><a href="typography.html">Typography</a></li>
                            <li><a href="buttons.html">Buttons</a></li>
                            <li><a href="icons.html">Icons</a></li>
                            <li><a href="panels.html">Panels</a></li>
                            <li><a href="tabs-accordions.html">Tabs &amp; Accordions</a></li>
                            <li><a href="modals.html">Modals</a></li>
                            <li><a href="bootstrap-ui.html">BS Elements</a></li>
                            <li><a href="progressbars.html">Progress Bars</a></li>
                            <li><a href="notification.html">Notification</a></li>
                            <li><a href="sweet-alert.html">Sweet-Alert</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu active"><a href="#"><i class="ion-settings"></i> <span class="nav-label">Components</span></a>
                        <ul class="list-unstyled">
                            <li><a href="grid.html">Grid</a></li>
                            <li><a href="portlets.html">Portlets</a></li>
                            <li class="active"><a href="widgets.html">Widgets</a></li>
                            <li><a href="nestable-list.html">Nesteble</a></li>
                            <li><a href="calendar.html">Calendar</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-compose"></i> <span class="nav-label">Forms</span></a>
                        <ul class="list-unstyled">
                            <li><a href="form-elements.html">General Elements</a></li>
                            <li><a href="form-validation.html">Form Validation</a></li>
                            <li><a href="form-advanced.html">Advanced Form</a></li>
                            <li><a href="form-wizard.html">Form Wizard</a></li>
                            <li><a href="form-editor.html">WYSIWYG Editor</a></li>
                            <li><a href="code-editor.html">Code Editors</a></li>
                            <li><a href="form-uploads.html">Multiple File Upload</a></li>
                            <li><a href="image-crop.html">Image Crop</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-grid"></i> <span class="nav-label">Data Tables</span></a>
                        <ul class="list-unstyled">
                            <li><a href="tables.html">Basic Tables</a></li>
                            <li><a href="table-datatable.html">Data Table</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-stats-bars"></i> <span class="nav-label">Charts</span></a>
                        <ul class="list-unstyled">
                            <li><a href="morris-chart.html">Morris Chart</a></li>
                            <li><a href="chartjs.html">Chartjs</a></li>
                            <li><a href="flot-chart.html">Flot Chart</a></li>
                            <li><a href="rickshaw-chart.html">Rickshaw Chart</a></li>
                            <li><a href="c3-chart.html">C3 Chart</a></li>
                            <li><a href="other-chart.html">Other Chart</a></li>
                        </ul>
                    </li>

                    <li class="has-submenu"><a href="#"><i class="ion-email"></i> <span class="nav-label">Mail</span></a>
                        <ul class="list-unstyled">
                            <li><a href="inbox.html">Inbox</a></li>
                            <li><a href="email-compose.html">Compose Mail</a></li>
                            <li><a href="email-read.html">View Mail</a></li>
                        </ul>
                    </li>

                    <li class="has-submenu"><a href="#"><i class="ion-location"></i> <span class="nav-label">Maps</span></a>
                        <ul class="list-unstyled">
                            <li><a href="gmap.html"> Google Map</a></li>
                            <li><a href="vector-map.html"> Vector Map</a></li>
                        </ul>
                    </li>
                    <li class="has-submenu"><a href="#"><i class="ion-document"></i> <span class="nav-label">Pages</span></a>
                        <ul class="list-unstyled">
                            <li><a href="profile.html">Profile</a></li>
                            <li><a href="timeline.html">Timeline</a></li>
                            <li><a href="invoice.html">Invoice</a></li>
                            <li><a href="contact.html">Contact-list</a></li>
                            <li><a href="login.html">Login</a></li>
                            <li><a href="register.html">Register</a></li>
                            <li><a href="recoverpw.html">Recover Password</a></li>
                            <li><a href="lock-screen.html">Lock Screen</a></li>
                            <li><a href="blank.html">Blank Page</a></li>
                            <li><a href="404.html">404 Error</a></li>
                            <li><a href="404_alt.html">404 alt</a></li>
                            <li><a href="500.html">500 Error</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
                
        </aside>
        <!-- Aside Ends-->


        <!--Main Content Start -->
        <section class="content">
            
            <!-- Header -->
            <header class="top-head container-fluid">
                <button type="button" class="navbar-toggle pull-left">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <!-- Search -->
                <form role="search" class="navbar-left app-search pull-left hidden-xs">
                  <input type="text" placeholder="Search..." class="form-control">
                </form>
                
                <!-- Left navbar -->
                <nav class=" navbar-default hidden-xs" role="navigation">
                    <ul class="nav navbar-nav">
                        <li class="dropdown">
                          <a data-toggle="dropdown" class="dropdown-toggle" href="#">English <span class="caret"></span></a>
                            <ul role="menu" class="dropdown-menu">
                                <li><a href="#">German</a></li>
                                <li><a href="#">French</a></li>
                                <li><a href="#">Italian</a></li>
                                <li><a href="#">Spanish</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Files</a></li>
                        <li><a href="../frontend/" target="_blank">Frontend</a></li>
                    </ul>
                </nav>
                
                <!-- Right navbar -->
                <ul class="list-inline navbar-right top-menu top-right-menu">  
                    <!-- mesages -->  
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="fa fa-envelope-o "></i>
                            <span class="badge badge-sm up bg-purple count">4</span>
                        </a>
                        <ul class="dropdown-menu extended fadeInUp animated nicescroll" tabindex="5001">
                            <li>
                                <p>Messages</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><img src="img/avatar-2.jpg" class="img-circle thumb-sm m-r-15" alt="img"></span>
                                    <span class="block"><strong>John smith</strong></span>
                                    <span class="media-body block">New tasks needs to be done<br><small class="text-muted">10 seconds ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><img src="img/avatar-3.jpg" class="img-circle thumb-sm m-r-15" alt="img"></span>
                                    <span class="block"><strong>John smith</strong></span>
                                    <span class="media-body block">New tasks needs to be done<br><small class="text-muted">3 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><img src="img/avatar-4.jpg" class="img-circle thumb-sm m-r-15" alt="img"></span>
                                    <span class="block"><strong>John smith</strong></span>
                                    <span class="media-body block">New tasks needs to be done<br><small class="text-muted">10 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <p><a href="inbox.html" class="text-right">See all Messages</a></p>
                            </li>
                        </ul>
                    </li>
                    <!-- /messages -->
                    <!-- Notification -->
                    <li class="dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <i class="fa fa-bell-o"></i>
                            <span class="badge badge-sm up bg-pink count">3</span>
                        </a>
                        <ul class="dropdown-menu extended fadeInUp animated nicescroll" tabindex="5002">
                            <li class="noti-header">
                                <p>Notifications</p>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><i class="fa fa-user-plus fa-2x text-info"></i></span>
                                    <span>New user registered<br><small class="text-muted">5 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><i class="fa fa-diamond fa-2x text-primary"></i></span>
                                    <span>Use animate.css<br><small class="text-muted">5 minutes ago</small></span>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="pull-left"><i class="fa fa-bell-o fa-2x text-danger"></i></span>
                                    <span>Send project demo files to client<br><small class="text-muted">1 hour ago</small></span>
                                </a>
                            </li>
                            
                            <li>
                                <p><a href="#" class="text-right">See all notifications</a></p>
                            </li>
                        </ul>
                    </li>
                    <!-- /Notification -->

                    <!-- user login dropdown start-->
                    <li class="dropdown text-center">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <img alt="" src="img/avatar-2.jpg" class="img-circle profile-img thumb-sm">
                            <span class="username">John Deo </span> <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu extended pro-menu fadeInUp animated" tabindex="5003" style="overflow: hidden; outline: none;">
                            <li><a href="profile.html"><i class="fa fa-briefcase"></i>Profile</a></li>
                            <li><a href="#"><i class="fa fa-cog"></i> Settings</a></li>
                            <li><a href="#"><i class="fa fa-bell"></i> Friends <span class="label label-info pull-right mail-info">5</span></a></li>
                            <li><a href="#"><i class="fa fa-sign-out"></i> Log Out</a></li>
                        </ul>
                    </li>
                    <!-- user login dropdown end -->       
                </ul>
                <!-- End right navbar -->

            </header>
            <!-- Header Ends -->


            <!-- Page Content Start -->
            <!-- ================== -->

            <div class="wraper container-fluid">
                <div class="page-title"> 
                    <h3 class="title">Widgets</h3> 
                </div>

                <!--Widget-1 -->
                <div class="row text-center">
                    <div class="col-sm-6 col-md-3">
                        <div class="panel">
                            <div class="h2 text-purple">15852</div>
                            <span class="text-muted">Sales</span>
                            <div class="text-right">
                              <i class="fa fa-usd fa-2x text-purple"></i>
                            </div>
                        </div>
                    </div>
                            
                    <div class="col-sm-6 col-md-3">
                        <div class="panel bg-primary">
                            <div class="h2 text-white">956</div>
                            <span class="text-white">New Orders</span>
                            <div class="text-right">
                              <i class="fa fa-shopping-cart fa-2x text-white"></i>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-6 col-md-3">
                        <div class="panel">
                            <div class="h2 text-primary">5210</div>
                            <span class="text-muted">New Users</span>
                            <div class="text-right">
                              <i class="fa fa-user fa-2x text-primary"></i>
                            </div>
                        </div>
                    </div>
                            
                    <div class="col-sm-6 col-md-3">
                        <div class="panel bg-purple">
                            <div class="h2 text-white">20544</div>
                            <span class="text-white">Visits</span>
                            <div class="text-right">
                              <i class="fa fa-eye fa-2x text-white"></i>
                            </div>
                        </div>
                    </div>

                </div> <!-- end row -->


                <!--Widget-2 -->
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="widget-panel widget-style-1 bg-pink">
                            <i class="fa fa-comments-o"></i> 
                            <h2 class="m-0 counter">50</h2>
                            <div>Comments</div>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6">
                        <div class="widget-panel widget-style-1 bg-warning">
                            <i class="fa fa-usd"></i> 
                            <h2 class="m-0 counter">12056</h2>
                            <div>Sales</div>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6">
                        <div class="widget-panel widget-style-1 bg-info">
                            <i class="fa fa-shopping-cart"></i> 
                            <h2 class="m-0 counter">1268</h2>
                            <div>New Orders</div>
                        </div>
                    </div>

                    <div class="col-md-3 col-sm-6">
                        <div class="widget-panel widget-style-1 bg-success">
                            <i class="fa fa-user"></i> 
                            <h2 class="m-0 counter">145</h2>
                            <div>New Users</div>
                        </div>
                    </div>
                </div> <!-- End row -->


                <!--Widget-3 -->
                <div class="row">
                    <div class="col-md-3 col-sm-6"> 
                        <div class="tile-stats white-bg"> 
                            <div class="status">
                                <h3 class="m-t-0">15% more</h3> 
                                <p>Monthly visitor statistics</p>
                            </div> 
                            <div class="chart-inline">
                                <span class="inlinesparkline"></span> 
                            </div>
                        </div> 
                    </div>

                    <div class="col-md-3 col-sm-6"> 
                        <div class="tile-stats white-bg"> 
                            <div class="status">
                                <h3 class="m-t-0">15</h3> 
                                <p>Avg. Sales per day</p>
                            </div> 
                            <span class="dynamicbar-big"></span> 
                        </div> 
                    </div>

                    <div class="col-md-3 col-sm-6"> 
                        <div class="tile-stats white-bg"> 
                            <div class="status">
                                <h3 class="m-t-0">-0.0102</h3> 
                                <p>Stock Market</p>
                            </div> 
                            <span id="compositeline"></span> 
                        </div> 
                    </div>

                    <div class="col-md-3 col-sm-6"> 
                        <div class="tile-stats white-bg"> 
                            <div class="col-sm-8">
                                <div class="status">
                                <h3 class="m-t-15">61.5%</h3> 
                                <p>US Dollar Share</p>
                            </div> 
                            </div>
                            <div class="col-sm-4 m-t-20">
                                <span class="sparkpie-big"></span> 
                            </div>
                        </div> 
                    </div>
                </div> <!-- End row -->


                <!--Widget-4 -->
                <div class="row">
                    <div class="col-md-3">
                        <div class="mini-stat clearfix">
                            <span class="mini-stat-icon bg-info"><i class="fa fa-usd"></i></span>
                            <div class="mini-stat-info text-right">
                                <span class="counter">15852</span>
                                Total Sales
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mini-stat clearfix">
                            <span class="mini-stat-icon bg-warning"><i class="fa fa-shopping-cart"></i></span>
                            <div class="mini-stat-info text-right">
                                <span class="counter">956</span>
                                New Orders
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mini-stat clearfix">
                            <span class="mini-stat-icon bg-pink"><i class="fa fa-user"></i></span>
                            <div class="mini-stat-info text-right">
                                <span class="counter">5210</span>
                                New Users
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="mini-stat clearfix">
                            <span class="mini-stat-icon bg-success"><i class="fa fa-eye"></i></span>
                            <div class="mini-stat-info text-right">
                                <span class="counter">20544</span>
                                Unique Visitors
                            </div>
                        </div>
                    </div>
                </div> <!-- End row-->


                <!-- WEATHER -->
                <div class="row">
                            
                    <div class="col-lg-6">
                        
                        <!-- BEGIN WEATHER WIDGET 1 -->
                        <div class="panel bg-inverse">
                            <div class="panel-body">
                            
                                <div class="row">
                                    <div class="col-sm-7">
                                        <div class="row">
                                            <div class="col-xs-6 text-center">
                                                <canvas id="partly-cloudy-day" width="115" height="115"></canvas>
                                            </div>
                                            <div class="col-xs-6">
                                                <h2 class="m-t-0 text-white"><b>32°</b></h2>
                                                <p class="text-white">Partly cloudy</p>
                                                <p class="text-white">15km/h - 37%</p>
                                            </div>
                                        </div><!-- End row -->
                                    </div>
                                    <div class="col-sm-5">
                                        <div class="row">
                                            <div class="col-xs-4 text-center">
                                                <h4 class="text-white m-t-0">SAT</h4>
                                                <canvas id="cloudy" width="35" height="35"></canvas>
                                                <h4 class="text-white">30<i class="wi-degrees"></i></h4>
                                            </div>
                                            <div class="col-xs-4 text-center">
                                                <h4 class="text-white m-t-0">SUN</h4>
                                                <canvas id="wind" width="35" height="35"></canvas>
                                                <h4 class="text-white">28<i class="wi-degrees"></i></h4>
                                            </div>
                                            <div class="col-xs-4 text-center">
                                                <h4 class="text-white m-t-0">MON</h4>
                                                <canvas id="clear-day" width="35" height="35"></canvas>
                                                <h4 class="text-white">33<i class="wi-degrees"></i></h4>
                                            </div>
                                        </div><!-- end row -->
                                    </div>
                                </div><!-- end row -->
                            </div><!-- panel-body -->
                        </div><!-- panel-->
                        <!-- END Weather WIDGET 1 -->
                        
                    </div><!-- End col-md-6 -->

                    <div class="col-lg-6">
                        
                        <!-- WEATHER WIDGET 2 -->
                        <div class="panel bg-danger">
                            <div class="panel-body">
                            
                                <div class="row">
                                    <div class="col-sm-7">
                                        <div class="">
                                            <div class="row">
                                                <div class="col-xs-6 text-center">
                                                    <canvas id="snow" width="115" height="115"></canvas>
                                                </div>
                                                <div class="col-xs-6">
                                                    <h2 class="m-t-0 text-white"><b> 23°</b></h2>
                                                    <p class="text-white">Partly cloudy</p>
                                                    <p class="text-white">15km/h - 37%</p>
                                                </div>
                                            </div><!-- end row -->
                                        </div><!-- weather-widget -->
                                    </div>
                                    <div class="col-sm-5">
                                        <div class="row">
                                            <div class="col-xs-4 text-center">
                                                <h4 class="text-white m-t-0">SAT</h4>
                                                <canvas id="sleet" width="35" height="35"></canvas>
                                                <h4 class="text-white">30<i class="wi-degrees"></i></h4>
                                            </div>
                                            <div class="col-xs-4 text-center">
                                                <h4 class="text-white m-t-0">SUN</h4>
                                                <canvas id="fog" width="35" height="35"></canvas>
                                                <h4 class="text-white">28<i class="wi-degrees"></i></h4>
                                            </div>
                                            <div class="col-xs-4 text-center">
                                                <h4 class="text-white m-t-0">MON</h4>
                                                <canvas id="partly-cloudy-night" width="35" height="35"></canvas>
                                                <h4 class="text-white">33<i class="wi-degrees"></i></h4>
                                            </div>
                                        </div><!-- End row -->
                                    </div> <!-- col-->
                                </div><!-- End row -->
                            </div><!-- panel-body -->
                        </div><!-- panel -->
                        <!-- END WEATHER WIDGET 2 -->
                            
                    </div><!-- /.col-md-6 -->
                </div> <!-- End row -->   

                <div class="row">

                    <!-- Sales Monitor -->
                    <div class="col-lg-4">
                        <div class="panel panel-default text-center">
                            <div class="panel-heading">
                                <h3 class="panel-title">SALES MONITOR</h3>
                            </div>
                            <div class="panel-body">
                                <div class="row">
                                    <div class="col-sm-12 text-center">
                                        <div class="chart easy-pie-chart-4" data-percent="22">
                                            <span class="percent"></span>
                                        </div>
                                        <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
                                        <button class="btn btn-info btn-sm m-t-20">View All</button>
                                    </div><!-- col-sm-12 -->
                                </div><!-- end row -->
                            </div><!-- panel-body -->
                        </div> <!-- Panel -->
                    </div> <!-- col-->

                    <div class="col-lg-4">
                        <!-- Start Profile Widget -->
                        <div class="profile-widget text-center">
                            <div class="bg-info bg-profile"></div>
                            <img src="img/avatar-2.jpg" class="thumb-lg img-circle img-thumbnail" alt="img">
                            <h3>Jonathan Doe</h3>
                            <p><i class="fa fa-map-marker"></i> London</p>
                            <a href="#" class="btn btn-sm btn-purple m-t-20">Follow</a>
                            <ul class="list-inline widget-list clearfix">
                                <li class="col-md-4"><span>2.109</span>Followers</li>
                                <li class="col-md-4"><span>596</span>Photos</li>
                                <li class="col-md-4"><span>902</span>Like</li>
                            </ul>
                        </div>
                        <!-- End Profile Widget -->
                    </div>

                    <div class="col-lg-4">
                        <div class="panel">
                            <div class="panel-heading text-center">
                              <h4 class="panel-title">Team Members</h4>              
                            </div>
                            <div class="panel-body">
                                <ul class="list-group list-group-lg">
                                    <li class="list-group-item b-0">
                                        <a href="" class=" m-r-10">
                                          <img src="img/avatar-8.jpg" class="thumb-sm br-radius" alt="member">
                                        </a>
                                        <span class="pull-right label bg-primary inline m-t-10">CEO</span>
                                        <a href="">Damon Parker</a>
                                    </li>
                                    <li class="list-group-item b-0">
                                        <a href="" class=" m-r-10">
                                          <img src="img/avatar-5.jpg" class="thumb-sm br-radius" alt="member">
                                        </a>
                                        <span class="pull-right label bg-info inline m-t-10">Webdesigner</span>
                                        <a href="">Joe Waston</a>
                                    </li>
                                    <li class="list-group-item b-0">
                                        <a href="" class=" m-r-10">
                                          <img src="img/avatar-6.jpg" class="thumb-sm br-radius" alt="member">
                                        </a>
                                        <span class="pull-right label bg-warning inline m-t-10">Webdeveloper</span>
                                        <a href="">Jannie Dvis</a>
                                    </li>
                                    <li class="list-group-item b-0">
                                        <a href="" class=" m-r-10">
                                          <img src="img/avatar-9.jpg" class="thumb-sm br-radius" alt="member">
                                        </a>
                                        <span class="pull-right label bg-warning inline m-t-10">Programmer</span>
                                        <a href="">Emma Welson</a>
                                    </li>
                                </ul>
                            </div> <!--Panel-body -->

                            <div class="panel-footer white-bg text-center">
                                <hr class="m-b-10"/>
                                <button class="btn btn-primary btn-addon btn-sm"><i class="fa fa-plus m-r-5"></i>Add Teammember</button>
                            </div> <!-- panel-footer-->
                        </div> <!-- Panel-->
                    </div><!-- col-->
                </div>   <!-- End row -->    

                <!-- Slider/ Carousel -->
                <div class="row">
                    <div class="col-md-6">
                        <div class="panel panel-default text-center">
                            <div class="panel-body p-0">
                                <div class="velonic-carousel">
                                    <div id="velonic-slider" class="owl-carousel">
                                        <div class="item">
                                            <h4><a href="#">Hey! Welcome to Velonic</a></h4>
                                            <p class="small">02 April, 2015</p>
                                            <p class="m-t-30"><em>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</em></p>
                                            <button class="btn btn-warning btn-sm m-t-40">Read more</button>
                                        </div><!-- /.item -->

                                        <div class="item">
                                            <h4><a href="#">Hey! Welcome to Velonic</a></h4>
                                            <p class="small">02 April, 2015</p>
                                            <p class="m-t-30"><em>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</em></p>
                                            <button class="btn btn-warning btn-sm m-t-40">Read more</button>
                                        </div><!-- /.item -->

                                        <div class="item">
                                            <h4><a href="#">Hey! Welcome to Velonic</a></h4>
                                            <p class="small">02 April, 2015</p>
                                            <p class="m-t-30"><em>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</em></p>
                                            <button class="btn btn-warning btn-sm m-t-40">Read more</button>
                                        </div><!-- /.item -->

                                    </div><!-- /#tiles-slide-1 -->
                                </div><!-- /.panel-body -->
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="panel panel-default text-center text-white slider-bg">
                            <div class="slider-overlay br-radius"></div>
                            <div class="panel-body p-0">
                                <div class="velonic-carousel">
                                    <div id="velonic-slider-2" class="owl-carousel">
                                        <div class="item">
                                            <h4 class="text-white"><b>Hey! Welcome to Velonic</b></h4>
                                            <p class="small">02 April, 2015</p>
                                            <p class="m-t-30"><em>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</em></p>
                                            <button class="btn btn-warning btn-sm m-t-40">Read more</button>
                                        </div><!-- /.item -->

                                        <div class="item">
                                            <h4 class="text-white"><b>Hey! Welcome to Velonic</b></h4>
                                            <p class="small">02 April, 2015</p>
                                            <p class="m-t-30"><em>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</em></p>
                                            <button class="btn btn-warning btn-sm m-t-40">Read more</button>
                                        </div><!-- /.item -->

                                        <div class="item">
                                            <h4 class="text-white"><b>Hey! Welcome to Velonic</b></h4>
                                            <p class="small">02 April, 2015</p>
                                            <p class="m-t-30"><em>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</em></p>
                                            <button class="btn btn-warning btn-sm m-t-40">Read more</button>
                                        </div><!-- /.item -->
                                    </div><!-- /#tiles-slide-2 -->
                                </div>
                            </div> <!-- panel-body -->
                        </div><!-- Panel -->
                    </div> <!-- col-->

                </div>  <!-- End row -->


            </div> <!-- END Wraper -->

            <!-- Page Content Ends -->
            <!-- ================== -->

            <!-- Footer Start -->
            <footer class="footer">
                2015 © Velonic.
            </footer>
            <!-- Footer Ends -->



        </section>
        <!-- Main Content Ends -->



    




        <!-- js placed at the end of the document so the pages load faster -->
        <script src="js/jquery.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/pace.min.js"></script>
        <script src="js/wow.min.js"></script>
        <script src="js/jquery.nicescroll.js" type="text/javascript"></script>

        <!-- Counter-up -->
        <script src="js/waypoints.min.js" type="text/javascript"></script>
        <script src="js/jquery.counterup.min.js" type="text/javascript"></script>

        <!-- skycons -->
        <script src="js/skycons.min.js" type="text/javascript"></script>

        <!-- EASY PIE CHART JS -->
        <script src="assets/easypie-chart/easypiechart.min.js"></script>
        <script src="assets/easypie-chart/jquery.easypiechart.min.js"></script>
        <script src="assets/easypie-chart/example.js"></script>

        <!-- sparkline --> 
        <script src="assets/sparkline-chart/jquery.sparkline.min.js" type="text/javascript"></script>
        <script src="assets/sparkline-chart/chart-sparkline.js" type="text/javascript"></script> 

        <!-- KNOB JS -->
        <!--[if IE]>
        <script type="text/javascript" src="assets/jquery-knob/excanvas.js"></script>
        <![endif]-->
        <script src="assets/jquery-knob/jquery.knob.js"></script>

        <!-- owl-carousel --> 
        <script src="assets/owl-carousel/owl.carousel.js"></script>


        <!-- Custom Script -->
        <script src="js/jquery.app.js"></script>

        <script type="text/javascript">
            jQuery(document).ready(function($) {
                /* Counter Up */
                $('.counter').counterUp({
                    delay: 100,
                    time: 1200
                });

                //owl carousel
                $("#velonic-slider,#velonic-slider-2").owlCarousel({
                    navigation : true,
                    slideSpeed : 300,
                    paginationSpeed : 400,
                    singleItem : true,
                    autoPlay:true
                });
            });
            /* BEGIN SVG WEATHER ICON */
            if (typeof Skycons !== 'undefined'){
            var icons = new Skycons(
                {"color": "#fff"},
                {"resizeClear": true}
                ),
                    list  = [
                        "clear-day", "clear-night", "partly-cloudy-day",
                        "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
                        "fog"
                    ],
                    i;

                for(i = list.length; i--; )
                icons.set(list[i], list[i]);
                icons.play();
            };
        </script>

    
    </body>
</html>
